<template>
  <div class="dashboard-container">
    <div class="app-container">
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <el-row>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="dialogVisible = true"
                >新增角色</el-button
              >
            </el-row>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="角色名" width="180">
              </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column label="操作">
                <template border slot-scope="{ row }">
                  <el-link type="primary" :underline="false">分配权限</el-link>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="putRoles(row.id)"
                    >修改</el-link
                  >
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="delClick(row.id)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              style="text-align: center"
              @current-change="getrole"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pagesize"
              :total="pageInfo.total"
              layout="total, prev, pager, next"
            >
            </el-pagination>
          </el-tab-pane>
          <!-- 2.0公司信息 -->
          <el-tab-pane label="公司信息" name="second">
            <el-form
              :model="comForm"
              style="width: 450px; margin: 0 auto"
              label-width="70px"
            >
              <el-form-item label="企业名称">
                <el-input disabled v-model="comForm.name"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input disabled v-model="comForm.companyAddress"></el-input>
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input disabled v-model="comForm.companyPhone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input disabled v-model="comForm.mailbox"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input disabled v-model="comForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

        <!-- 对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          @close="canceIdialog"
        >
          <el-form ref="addform" :model="addform" :rules="addrules">
            <el-form-item prop="name" label="角色昵称" label-width="120px">
              <el-input v-model="addform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              prop="description"
              label="角色描述"
              label-width="120px"
            >
              <el-input
                v-model="addform.description"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="canceIdialog">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
      </template>
    </div>
  </div>
</template>

<script>
// 导入请求
import {
  getrole,
  delRole,
  postRole,
  putRole,
  getRolelist,
  getCompany, //获取企业信息
} from "@/api/setting.js";
import { mapGetters } from "vuex";
export default {
  name: "setting",
  data() {
    return {
      dialogVisible: false,
      comForm: {},
      addform: {},
      activeName: "first",
      tableData: [],
      pageInfo: {
        page: 1, //页码
        pagesize: 2, //容量
        total: 1000, //总数据
      },
      // 表单验证
      addrules: {
        name: [{ required: true, message: "名字不能为空!", trigger: "blur" }],
        description: [
          { required: true, message: "名字不能为空!", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 调用发起请求获取角色列表
    this.getrole();
    this.getComPany();
  },
  methods: {
    // 封装一个请求方法
    async getrole() {
      let res = await getrole(this.pageInfo);
      // console.log(res);
      this.pageInfo.total = res.data.total;
      this.tableData = res.data.rows;
    },
    async delClick(id) {
      try {
        // 删除提示
        await this.$confirm("确定要删除吗");
        // 发起请求
        await delRole(id);
        // 刷新加载数据
        this.getrole();
        // 成功提示
        this.$message.success("删除成功");
      } catch {
        console.log("点了取消");
      }
    },
    // 新增角色
    save() {
      // 表单验证
      this.$refs.addform.validate(async (isok) => {
        if (isok) {
          if (this.addform.id) {
            // 有id为编辑修改
            await putRole(this.addform);
          } else {
            // 否则是新增
            await postRole(this.addform);
          }
          // 加载数据
          this.getrole();
          //提示
          this.$message.success(this.title + "成功");
          // 隐藏弹框
          this.dialogVisible = false;
        }
      });
    },
    // 取消清空表单验证
    canceIdialog() {
      // 清空内容
      this.addform = {};
      // 清空表单验证
      this.$refs.addform.resetFields();
      this.dialogVisible = false;
    },
    // 修改角色
    async putRoles(id) {
      let res = await getRolelist(id);
      // console.log(res);
      this.addform = res.data;
      this.dialogVisible = true;
    },
    // 获取企业详情
    async getComPany() {
      let res = await getCompany(this.companyId);
      // console.log(res);
      this.comForm = res.data;
    },
  },
  computed: {
    ...mapGetters(["companyId"]),
    title() {
      return this.addform.id ? "编辑角色" : "新增角色";
    },
  },
};
</script>

<style lang="scss">
.dashboard-container {
  .el-tabs__content {
    margin: 40px 20px;
    .cell a {
      padding-right: 10px;
    }
  }
}
</style>